<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/modules/cms/front/include/taglib.jsp"%>
<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta name="decorator" content="cms_default_${site.theme}"/>
	<meta name="description" content="${site.description}" />
	<meta name="keywords" content="${site.keywords}" />
	<link rel="stylesheet" href="${ctxStatic}/Nivo-Slider-3.2/themes/default/default.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="${ctxStatic}/Nivo-Slider-3.2/themes/light/light.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="${ctxStatic}/Nivo-Slider-3.2/themes/dark/dark.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="${ctxStatic}/Nivo-Slider-3.2/themes/bar/bar.css" type="text/css" media="screen" />
	<link rel="stylesheet" href="${ctxStatic}/Nivo-Slider-3.2/nivo-slider.css" type="text/css" />
	<script src="${ctxStatic}/Nivo-Slider-3.2/jquery.nivo.slider.pack.js" type="text/javascript"></script>
	<script type="text/javascript" src="${ctxStatic}/SuperSlide/jquery.SuperSlide.2.1.1.js"></script>
	<script type="text/javascript">
		$(window).load(function() {
		    $('#slider').nivoSlider();
		    $('#slider').nivoSlider({
			    effect: 'random',                 // Specify sets like: 'fold,fade,sliceDown'
			    slices: 15,                     // For slice animations
			    boxCols: 8,                     // For box animations
			    boxRows: 4,                     // For box animations
			    animSpeed: 500,                 // Slide transition speed
			    pauseTime: 3000,                 // How long each slide will show
			    startSlide: 0,                     // Set starting Slide (0 index)
			    directionNav: true,             // Next & Prev navigation
			    controlNav: true,                 // 1,2,3... navigation
			    controlNavThumbs: false,         // Use thumbnails for Control Nav
			    pauseOnHover: true,             // Stop animation while hovering
			    manualAdvance: false,             // Force manual transitions
			    prevText: 'Prev',                 // Prev directionNav text
			    nextText: 'Next',                 // Next directionNav text
			    randomStart: false,             // Start on a random slide
			    beforeChange: function(){},     // Triggers before a slide transition
			    afterChange: function(){},         // Triggers after a slide transition
			    slideshowEnd: function(){},     // Triggers after all slides have been shown
			    lastSlide: function(){},         // Triggers when last slide is shown
			    afterLoad: function(){}         // Triggers when slider has loaded
			});
		    $('#main-container-fluid a').attr("target","_blank");
		});
	</script>
	<style type="text/css">
		#main-container-fluid .container {
			width: 998px;
		}
		.content {
			background-color: #efc810;
		}
		.menushadow {
			height:30px;
			padding-bottom:10px;
			background: url("${ctxStaticTheme}/images/home_menu_shadow.png") no-repeat;
		}
		.slider-wrapper {
			padding:5px !important;
			width: 484px;
			height:374px;
			background-color:#ece8dd !important;
			float:left;
		}
		#slider {
			width: 484px;
			height:344px;
		}
		#slider img {
		    position:absolute;
		    top:0px;
		    left:0px;
		    display:none;
		    width: 484px;
		    height: 344px !important;
		}
		#slider .nivo-caption {
			height: 80px;
			background-color: #ca1413;
			opacity: 0.6;
			-moz-opacity: 0.6;
			filter: alpha(opacity=6);
			text-indent: 20px;
		}
				
		.latest-contents {
			width: 464px;
			height:384px;
			float:right;
			overflow: hidden;
			text-overflow:ellipsis;
		}
		.latest-article-content {
			height: 142px;
		}
		.latest-article-content a {
			text-decoration: none;
			color: #858585;
		}
		.latest-article-title {
			line-height: 30px;
			font-size:20px;
			font-family:simsun;
			font-weight:900;
			color: #ca1413;
			text-align: center;
		}
		.latest-article-detail {
			padding-right:10px;	
			padding-top:10px;
			padding-bottom: 10px;
			text-indent: 30px;
			font-family: 'Microsoft YaHei';
			font-size: 14px;
			color: #858585;
		}
		.latest-article-list {
			height:222px;
			padding:15px 10px 5px 10px;
			background-color: #f7e48a;
		}
		.article-list-block {
			background-color: #f7e48a;
			height: 301px;
		}
		.article-list-block .article-list-head-left {
			border-top:7px solid #ca1413;
			width: 30%;
			padding-top: 10px;
			padding-left: 20px;
			font-size: 20px;
			font-weight:bold;
			font-family:simsun;
			color: #ca1413;
		}
		.article-list-block .article-list-head-right {
			border-top:4px solid #d5c2b0;
			width: 70%;
			margin: 0;
			padding-top: 10px;
			padding-right: 10px;
		}
		.article-list-block .article-list {
			padding-left: 15px;
			padding-right: 10px;
			padding-bottom: 10px;
		}
		
		.latest-contents .latest-article-list li,
		.article-list-block .article-list li {
			line-height: 28px;
			list-style-image: url("${ctxStaticTheme}/images/article_list_block_logo.png");
			font-family: 'Microsoft YaHei';
		}
		.latest-contents .latest-article-list li a,
		.article-list-block .article-list li a {
			text-decoration: none;
		}
		.category-tile {
			background-color: #ece8dd;
			height: 301px;
		}
		#categoryTile {
			padding-top:5px;
		}
		#categoryTile li {
			background-color: #716f71;
		}
		
		#categoryTile li a {
			color: #efc810;
			font-weight:bold;
			font-size:18px;
			font-family: '楷体','楷体_GB2312';
			-webkit-border-radius:0;
			border-radius: 0;
		}
		
		#categoryTile li a:focus {
			color:white;
		}
		
		.category-tile .nav-tabs .active>a, 
		.category-tile .nav-tabs .active>a:hover, 
		.category-tile .nav-tabs .active>a:focus  {
			color:white !important;
			background-color: #ca1413;
		}
		#category-tile-content {
			padding:20px 10px 20px 20px;
			font-family: 'Microsoft YaHei';
  			font-size: 14px;
  			line-height: 22px;
  			color:#ca1413;
		}
		
		#category-tile-content .tab-pane img {
			float:left; 
			max-width:190px; 
			max-height:143px;
			margin-right: 10px;
			margin-bottom: 10px;
		}
		.link-block {
			width:149px;
			height:301px;
			background: url("${ctxStaticTheme}/images/link_block_bg.png") no-repeat;
		}
		.link-block ul {
			padding: 10px 0 10px 19px;
		}
		.link-block ul li {
			width:130px;
			height: 47px;
			margin-top: 10px;
			margin-bottom: 10px;
		}
		.link-block ul li a {
			-webkit-border-radius:0 !important;
			border-radius: 0 !important;
			border:none !important;
			background: url("${ctxStaticTheme}/images/link_bg.png") no-repeat !important;
			font-family: SimSun;
			font-weight: bold;
			font-size:18px;
			color: white;
			padding-left: 30px;
		}
		
		.videoArticle {
			margin-left: 10px;
			margin-right: 10px;
			margin-bottom: 10px;
			height:234px;
			background-color: white;
		}
		.videoArticle .row-fluid {
			height:117px !important;
		}
		.videoArticle .row-fluid .span4 {
			padding-top:11px;
			height:110px !important;
			text-align: center;
		}
		.videoArticle a {
			text-decoration: none;
			color:  #ca1413 !important;
			font-family:'Microsoft YaHei' !important;
			font-size:12px !important;
		}
		.videoArticle img {
			max-width:120px; 
			max-height:80px;
		}
		
		.scroll-images {
			height: 240px;
			background-color:white;
		}
		
		.scroll-title-container {
			margin:5px 10px 5px 10px;
			height:30px;
			background: url("${ctxStaticTheme}/images/scroll_title_bg.png") repeat-x;
		}
		.scroll-title {
			margin:4px auto 1px 5px;
			height:25px;
			padding-left:45px;
			background: url("${ctxStaticTheme}/images/scroll_title_logo.png") no-repeat;
			float: left;
			font-family: simsun;
			font-size: 20px;
			font-weight:bold;
			line-height: 25px;
			color: #ca1413;
		}
		.picScroll *{margin:0; padding:0; list-style:none; }
		.picScroll {
			margin: 10px auto;
			position: relative;
			border-bottom:1px dashed #efc810;
			width: 932px;
			padding: 10px 30px 20px 30px;
			background: #fff;
			overflow: hidden;
		}
		.picScroll .prev,.picScroll .next {
			display: block;
			position: absolute;
			top: 75px;
			left: 5px;
			width: 23px;
			height: 23px;
			background: url("${ctxStaticTheme}/images/scroll_nav_btns.png") no-repeat;
		}
		
		.picScroll .next {
			left: auto;
			right: 5px;
			background-position: -25px 0;
		}
		
		.picScroll .prev:hover {
			background-position: 0 -30px;
		}
		
		.picScroll .next:hover {
			background-position: -25px -30px;
		}
		
		.picScroll ul {
			overflow: hidden;
			zoom: 1;
		}
		
		.picScroll ul li {
			width: 200px;
			float: left;
			overflow: hidden;
			padding: 0 15px;
			text-align: center;
		}
		
		.picScroll ul li img {
		    border:0;
			width: 200px;
			height: 150px;
			display: block;
			background: url("${ctxStaticTheme}/images/images/loading.gif") center center no-repeat;
		}
	</style>
</head>
<body>
	<div class="menushadow"></div>
	<div class="row-fluid">
      <div class="span6">
	    <div class="slider-wrapper theme-light">
	      	<div id="slider" class="nivoSlider">
	      		<c:forEach items="${fnc:getArticleList(site.id, '11', 8, 'image:1,includeArticleData:1')}" var="articleImage" varStatus="status">
	      			<c:set var="imageTitle" value="${fns:abbr(fns:replaceHtml(articleImage.description),40)}"/>
	      			<c:if test="${empty imageTitle}">
	      			<c:set var="imageTitle" value="${fns:abbr(fns:replaceHtml(articleImage.articleData.content),40)}"/>
	      			</c:if>
			    	<img src="${articleImage.image}" alt="" title="${imageTitle}"/>
			    </c:forEach>
			</div>
<!-- 			<div id="htmlcaption" class="nivo-html-caption"> -->
<!-- 			    <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>. -->
<!-- 			</div> -->
	    </div>
      </div>
      	<div class="span6">
      		<div class="latest-contents">
      			<c:forEach items="${fnc:getArticleList(site.id, '12', 8, 'includeArticleData:1')}" var="article" varStatus="status">
	     			<c:if test="${status.first}">
	     				<div class="latest-article-content">
	     					<a href="${article.url}">
	     					<div class="row-fluid">
	     						<div class="latest-article-title">
		     						${fns:abbr(article.title,40)}
	     						</div>
	     					</div>
	     					<div class="row-fluid">
	     						<div class="latest-article-detail">
	     							${fns:abbr(fns:replaceHtml(article.articleData.content),250)}
	     						</div>
	     					</a>
	     					</div>
	     				</div>
	     			</c:if>
	     			<c:if test="${status.count > 1}">
	     				<c:if test="${status.count == 2}">
			     			<div class="latest-article-list">
			     				<ul>
	     				</c:if>
	     							<li>
										<a href="${article.url}" style="color:${article.color}">${fns:abbr(article.title,48)}</a>
										<span class="pull-right"><fmt:formatDate value="${article.updateDate}" pattern="yyyy-MM-dd"/></span>
									</li>
		     			<c:if test="${status.last}">
		     						<li style="list-style: none;">
				     					<small><a href="${ctx}/list-${article.category.id}${urlSuffix}" class="pull-right"><font color="#ca1413;">更多&gt;&gt;</font></a></small>
		     						</li>
		     					</ul>
			     			</div>
	     				</c:if>	
	     			</c:if>
				</c:forEach>
      		</div>
		</div>
    </div>
    <div style="height:40px;"></div>
    <div class="row-fluid">
      <div class="span5 article-list-block">
      	<div class="row-fluid">
	      	<div class="span4 article-list-head-left">	
	      		<c:set var="category1" value="${fnc:getCategory('2')}"/>
	      		${category1.name}
	      	</div>
	      	<div class="span8 article-list-head-right">
	      		<small><a href="${ctx}/list-${category1.id}${urlSuffix}" class="pull-right"><font color="#ca1413;">更多&gt;&gt;</font></a></small>
	      	</div>
      	</div>
      	<div style="height:20px;"></div>
      	<div class="row-fluid">
      		<div class="article-list">
      		<ul>
      			<c:forEach items="${fnc:getArticleList(site.id, category1.id, 8, '')}" var="article">
				<li>
					<a href="${article.url}" style="color:${article.color}">${fns:abbr(article.title,50)}</a>
<%-- 					<span class="pull-right"><fmt:formatDate value="${article.updateDate}" pattern="yyyy.MM.dd"/></span> --%>
				</li>
				</c:forEach>
			</ul>
			</div>
      	</div>
      </div>
      <div class="span7">
      	<div class="row-fluid category-tile">
      		<c:set var="tile1" value="${(fnc:getArticleList(site.id, '12', 1, 'includeArticleData:1')).get(0)}"/>
      		<c:set var="tile2" value="${(fnc:getArticleList(site.id, '13', 1, 'includeArticleData:1')).get(0)}"/>
      		<c:set var="tile3" value="${(fnc:getArticleList(site.id, '14', 1, 'includeArticleData:1')).get(0)}"/>
      		<div class="span11">
      			<div id="category-tile-content" class="tab-content"> 
			      <div class="tab-pane" id="tile1">
                        <a href="${tile1.url}">
			      		<img alt="" src="${tile1.image}" />
			      		${fns:abbr(fns:replaceHtml(tile1.articleData.content),630)}
                        </a>
			      </div> 
 			      <div class="tab-pane" id="tile2">
                        <a href="${tile2.url}">
 			      		<img alt="" src="${tile2.image}" />
			      		${fns:abbr(fns:replaceHtml(tile2.articleData.content),630)}
                        </a>
 			      </div> 
			      <div class="tab-pane" id="tile3">
                        <a href="${tile3.url}">
			      		<img alt="" src="${tile3.image}" />
			      		${fns:abbr(fns:replaceHtml(tile3.articleData.content),630)}
                        </a>
			      </div> 
			    </div> 
      		</div>
      		<div class="span1" style="margin-left:0; width:44px;">
      			<ul id="categoryTile" class="nav nav-tabs nav-stacked"> 
			      <li><a href="#tile1">${(fnc:getCategory(tile1.category.id)).name}</a></li> 
			      <li><a href="#tile2">${(fnc:getCategory(tile2.category.id)).name}</a></li> 
			      <li><a href="#tile3">${(fnc:getCategory(tile3.category.id)).name}</a></li> 
			    </ul> 
      		</div>
      	</div>
    <script> 
      $(function () { 
        $('#categoryTile a:first').tab('show');//初始化显示哪个tab 
        $('#categoryTile a').click(function (e) { 
          e.preventDefault();//阻止a链接的跳转行为 
          $(this).tab('show');//显示当前选中的链接及关联的content 
        }) 
      }) 
    </script>
      </div>
    </div>
    <div style="height:40px;"></div>
    <div class="row-fluid">
      <div class="span5 article-list-block">
      	<div class="row-fluid">
	      	<div class="span4 article-list-head-left">	
	      		<c:set var="category2" value="${fnc:getCategory('6')}"/>
	      		${category2.name}
	      	</div>
	      	<div class="span8 article-list-head-right">
	      		<small><a href="${ctx}/list-${category2.id}${urlSuffix}" class="pull-right"><font color="#ca1413;">更多&gt;&gt;</font></a></small>
	      	</div>
      	</div>
      	<div style="height:20px;"></div>
      	<div class="row-fluid">
      		<div class="article-list">
      		<ul>
      			<c:forEach items="${fnc:getArticleList(site.id, category2.id, 8, '')}" var="article">
				<li>
					<a href="${article.url}" style="color:${article.color}">${fns:abbr(article.title,50)}</a>
<%-- 					<span class="pull-right"><fmt:formatDate value="${article.updateDate}" pattern="yyyy.MM.dd"/></span> --%>
				</li>
				</c:forEach>
			</ul>
			</div>
      	</div>
      </div>
      <div class="span5 article-list-block">
      	<div class="row-fluid">
	      	<div class="span4 article-list-head-left">	
	      		<c:set var="videoCategory" value="${fnc:getCategory('9')}"/>
	      		${videoCategory.name}
	      	</div>
	      	<div class="span8 article-list-head-right">
	      		<small><a href="${ctx}/list-${videoCategory.id}${urlSuffix}" class="pull-right"><font color="#ca1413;">更多&gt;&gt;</font></a></small>
	      	</div>
      	</div>
      	<div style="height:20px;"></div>
      	<div class="row-fluid">
      		<div class="videoArticle">
      		<c:set var="videoArticleList" value="${fnc:getArticleList(site.id, videoCategory.id, 6, '')}"/>
			<c:forEach items="${videoArticleList}" var="article" varStatus="status">
				<c:if test="${(status.index mod 3) == 0}">
					<div class="row-fluid">
				</c:if>
						<div class="span4">
							<a href="${article.url}">
								<img alt="" src="${article.image}">
								<div style="padding-top:2px;">${fns:abbr(article.title,20)}</div>
							</a>
						</div>
				<c:if test="${(status.index mod 3) == 2}">
					</div>
				</c:if>
				<c:if test="${((status.index mod 3) lt 2) and (status.count eq fn:length(videoArticleList))}">
					</div>
				</c:if>
			</c:forEach>
			</div>
      	</div>
      </div>
      <div class="span2">
       		<div class="link-block">
       			<ul class="nav nav-tabs nav-stacked">
       			<c:forEach items="${fnc:getCategoryList(site.id, '15', 5, 'module:\"link\"')}" var="link">
       				<li>
       					<a href="${link.href}" target="_blank">${link.name}</a>
       				</li>
       			</c:forEach>
       			</ul>
       		</div>
      </div>
    </div>
    <div style="height:40px;"></div>
    <div class="row-fluid">
    	<div class="span12 scroll-images">
    		<c:set var="scrollCategory" value="${fnc:getCategory('0')}"/>
    	 	<div class="scroll-title-container">
    	 		<div class="scroll-title">
    	 			${empty scrollCategory.name ? '各中心活动掠影' : scrollCategory.name}
    	 		</div>
    	 			<span class="pull-right" style="padding-top: 4px;">
    	 			<small><a href="${ctx}/list-${scrollCategory.id}${urlSuffix}"><font color="#ca1413;">更多&gt;&gt;</font></a></small>
    	 			</span>
    	 	</div>
			<div class="picScroll"> 
				<ul>
					<c:forEach items="${fnc:getArticleList(site.id, scrollCategory.id, 16, 'image:1')}" var="article">
					<li>
						<a href="${article.url}">
							<img alt="" src="${article.image}">
							${fns:abbr(article.title,30)}
						</a>
					</li>
					</c:forEach>
				</ul>
				<a class="prev" href="javascript:void(0)"></a> 
				<a class="next" href="javascript:void(0)"></a> 
			</div> 
    	</div>
    	<script type="text/javascript">jQuery(".picScroll").slide({ mainCell:"ul", effect:"leftMarquee", vis:4, autoPlay:true, interTime:50, switchLoad:"_src" });	</script> 
    </div>
    <div style="height:40px;"></div>
</body>
</html>